<template>
    <div
        class="product-list"
        :class="{
            'product-list--search': props.search,
        }"
        v-if="renderList.length"
    >
        <div class="product-item" v-for="item in renderList" :key="item.id">
            <div class="product-item__image">
                <var-image
                    fit="cover"
                    :src="
                        item.file +
                        '?x-oss-process=image/watermark,image_' +
                        toBase64(
                            'water/logo_white.png?x-oss-process=image/resize,P_30'
                        ) +
                        ',g_center,t_60'
                    "
                    @click="
                        props.search
                            ? onVideoPreview(
                                  item,
                                  item.templatestype_id || props.type
                              )
                            : onPreview(
                                  item,
                                  item.templatestype_id || props.type
                              )
                    "
                    lazy
                    ripple
                    alt="北京华锐云空间"
                />
            </div>

            <div class="product-item__info">
                <div class="product-item__title">
                    <div class="product-name">
                        {{ item.name }}
                    </div>

                    <var-button
                        class="product-item__btn"
                        type="primary"
                        @click="
                            onShare(item, item.templatestype_id || props.type)
                        "
                        color="#FFAD38"
                    >
                        分享推荐
                    </var-button>
                </div>
                <div class="product-item__bottom">
                    <div class="icon-item view-item">
                        <img
                            :src="`${_oss_}images/mobile/works/icon-view.png`"
                        />
                        <span>{{ item.page_view || 0 }}</span>
                    </div>

                    <div
                        class="icon-item like-item"
                        :class="{ active: item.is_like }"
                        @click="onLike(item)"
                    >
                        <img
                            v-if="item.is_like"
                            :src="`${_oss_}images/mobile/works/icon-like-active.png`"
                        />
                        <img
                            v-else
                            :src="`${_oss_}images/mobile/works/icon-like.png`"
                        />
                        <span>{{ item.like || 0 }}</span>
                    </div>

                    <div
                        class="icon-item star-item"
                        :class="{ active: item.is_star }"
                        @click="onStar(item)"
                    >
                        <img
                            v-if="item.is_star"
                            :src="`${_oss_}images/mobile/works/icon-star-active.png`"
                        />
                        <img
                            v-else
                            :src="`${_oss_}images/mobile/works/icon-star.png`"
                        />
                        <span>{{ item.star || 0 }}</span>
                    </div>

                    <div
                        class="icon-item comment-item"
                        @click="onComment(item)"
                    >
                        <img
                            :src="`${_oss_}images/mobile/works/icon-comment.png`"
                            alt="北京华锐云空间"
                        />
                        <span>{{ item.comment || 0 }}</span>
                    </div>

                    <div class="icon-item share-item">
                        <img
                            :src="`${_oss_}images/works/icon-share.png`"
                            alt="北京华锐云空间"
                        />
                        <span>{{ item.share || 0 }}</span>
                    </div>

                    <var-button
                        class="make-same-btn"
                        type="primary"
                        @click="
                            onMakeSame(
                                item,
                                item.templatestype_id || props.type
                            )
                        "
                        v-if="!props.search"
                    >
                        制作同款
                    </var-button>
                </div>
            </div>
        </div>
    </div>

    <PageSeeMoreM
        v-if="props.list.length > pagination.size * pagination.page"
        @next="pagination.page += 1"
    />
    <el-empty :image-size="150" v-show="props.list.length == 0" />
</template>
<script setup>
import { useContent } from ".";
import { useLike, useStar } from "~/hooks";
const props = defineProps({
    list: {
        type: Array,
        default: () => ({}),
    },
    keyword: {
        type: String,
        default: "",
    },
    type: {
        type: Number,
        default: 1,
    },
    search: {
        type: Boolean,
        default: false,
    },
});

const pagination = reactive({
    size: 10,
    page: 1,
});

const emits = defineEmits(["videoPreview"]);

const { onShare, onPreview, onComment, onMakeSame } = useContent();
const { onLike } = useLike();
const { onStar } = useStar();

const renderList = computed(() => {
    return props.list
        .filter((item) => !props.keyword || item.name.includes(props.keyword))
        .slice(0, pagination.page * pagination.size);
});

const onVideoPreview = (item, type) => {
    emits("videoPreview", { item, type });
};

defineExpose({
    setInitPage() {
        pagination.page = 1;
    },
});
</script>
<style lang="scss" scoped>
.product-list--search .product-item__title {
    border-bottom: none !important;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;

    .product-item {
        width: 345px;
        height: 230px;
        overflow: hidden;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
        border-radius: 3px;

        &__image {
            position: relative;
            width: 100%;
            height: 150px;

            .var-image {
                width: 100%;
                height: 100%;
            }
        }

        &__info {
            padding: 8px 0 14px;
        }

        &__title {
            width: 100%;
            display: flex;
            align-items: center;
            margin-right: 10px;
            padding: 0px 10px 8px;
            border-bottom: 1px solid #ddd;

            .product-name {
                font-size: 17px;
                font-weight: 500;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #333;
            }
        }

        &__btn {
            width: 70px;
            height: 25px;
            padding: 0;
            border-radius: 3px;
            font-size: 14px;
            margin-left: auto;
            box-shadow: none;
            flex-shrink: 0;
        }

        &__bottom {
            display: flex;
            align-items: center;
            color: #333;
            padding: 7px 10px 0;

            .icon-item {
                display: flex;
                align-items: center;
                font-size: 12px;
                margin-right: 18px;

                img {
                    margin-right: 4px;
                }

                &.like-item,
                &.star-item {
                    cursor: pointer;

                    img {
                        transition: all 0.2s;
                    }

                    &:active img {
                        transform: scale(1.3);
                    }
                }

                &.view-item {
                    img {
                        width: 13px;
                        height: 9px;
                    }
                }

                &.like-item {
                    img {
                        width: 13px;
                        height: 12px;
                    }
                }

                &.star-item {
                    img {
                        width: 13px;
                        height: 13px;
                    }
                }

                &.comment-item {
                    img {
                        width: 12px;
                        height: 12px;
                    }
                }
            }

            .make-same-btn {
                width: 70px;
                height: 25px;
                padding: 0;
                border-radius: 3px;
                font-size: 14px;
                margin-left: auto;
                box-shadow: none;
                flex-shrink: 0;
            }
        }
    }
}
</style>
